<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <!--<link rel="stylesheet" type="text/css" href="../css/aui.css"/>-->
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css"/>
    <script>
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 * 100 + 'px';
    </script>
    <style>
        body {
            width: 3.75rem;
        }
        
        .search {
            height: 0.3rem;
            padding: 0.07rem 0.12rem;
        }
        
        .search-box {
            width: 3.51rem;
            height: 0.3rem;
            border-radius: 0.15rem;
            background-color: #F0F0F0;
        }
        
        .search-image {
            width: 0.2rem;
            height: 0.2rem;
            float: left;
            margin: 0.04rem 0 0 0.08rem;
            font-size: 0.22rem;
        }
        
        .search-input {
            height: 0.3rem;
            float: left;
            margin-left: 0.05rem;
            font-size: 0.14rem;
            line-height: 0.31rem;
        }
        
        input:focus {
            outline: medium;
        }
        
        .banner-plate-navigation {
            height: 3.71rem;
        }
        
        .banner {
            width: 3.51rem;
            height: 1.8rem;
            margin-left: 0.12rem;
            margin-top: 0.07rem;
        }
        
        .banner-lbt {
            height: 1.5rem;
        }
        
        .banner-lbt image {
            width: 100%;
            height: 100%;
        }
        
        .indicator {
            /*position: absolute;*/
            /*top: 2.44rem;*/
            /*left: 0;*/
            /*right: 0;*/
            /*bottom: 0.1rem;*/
            margin-top: 0.05rem;
            display: flex;
            justify-content: center;
        }
        
        .indicator-box {
            margin: 0 0.04rem;
            width: 0.1rem;
            height: 0.1rem;
            background-color: #ccc;
            border-radius: 0.1rem;
            transition: all 0.6s ease-in-out;
        }
        
        .indicator-box-active {
            width: 0.1rem;
            background: red;
        }
        
        .plate-navigation {
            width: 3.51rem;
            height: 1.68rem;
            margin: 0 0.12rem;
            
        }
        
        .save-money {
            width: 0.5rem;
            float: left;
            margin-top: 0.08rem;
        }
        
        .plate-navigation-box {
            width: 0.5rem;
            float: left;
            height: 0.74rem;
            margin-left: 0.25rem;
            margin-top: 0.08rem;
        }
        
        .plate-navigation-text {
            margin-top: 0.08rem;
            font-size: 0.12rem;
            color: #000;
            text-align: center;
        }
        
        .save-money .plate-navigation-image {
            background: url("../image/huishengqian.jpg") no-repeat;
            background-size: 100% 100%;
        }
        
        .plate-navigation-box .plate-navigation-image {
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 0.5rem;
            background: url("../image/huishengqian.jpg") no-repeat;
            background-size: 100% 100%;
        }
        
        .plate-navigation-one .plate-navigation-box:nth-child(1), .plate-navigation-one .plate-navigation-box:nth-child(6) {
            margin-left: 0;
        }
        
        .plate-navigation-two .plate-navigation-box:nth-child(1), .plate-navigation-two .plate-navigation-box:nth-child(6) {
            margin-left: 0;
        }
        
        .swipe {
            overflow: hidden;
            position: relative;
        }
        
        .swipe-wrap {
            overflow: hidden;
            position: relative;
        }
        
        .swipe-wrap .swipe-box {
            float: left;
            width: 100%;
            position: relative;
            overflow: hidden;
        }
        
        .swipe-box img {
            width: 100%;
            border-radius: 10px;
        }
        
        .title-box {
            width: 100%;
            /*position: absolute;*/
            /*top: 4.35rem;*/
            /*left: 0;*/
            /*right: 0;*/
            margin-top: 0.05rem;
            bottom: 0.1rem;
        }
        
        #swipeIndicator {
            display: flex;
            justify-content: center;
        }
        
        #swipeIndicator li {
            width: 0.15rem;
            height: 0.04rem;
            background-color: #ccc;
            transition: all 0.6s ease-in-out;
        }
        
        #swipeIndicator li.active {
            width: 0.17rem;
            background: #FF3536;
        }
        
        .activity {
            height: 3rem;
            margin: 0 0.12rem 0.1rem 0.12rem;
        }
        
        .activity-top {
            height: 1.5rem;
        }
        
        .activity-top-img {
            width: 1.72rem;
            height: 1.5rem;
            border-radius: 0.1rem;
            float: left;
            margin-left: 0.07rem;
            overflow: hidden;
        }
        
        .activity-top-img:nth-child(1) {
            margin-left: 0;
        }
        
        .activity-bottom {
            height: 1.5rem;
            margin-top: 0.08rem;
        }
        
        .activity-bottom-img {
            width: 1.12rem;
            height: 1.5rem;
            border-radius: 0.1rem;
            float: left;
            margin-left: 0.07rem;
            overflow: hidden;
        }
        
        .activity-bottom-img:nth-child(1) {
            margin-left: 0;
        }
        
        .activity img {
            width: 100%;
            height: 100%;
        }
        
        .palteNew {
            margin: 0.25rem 0.12rem;
            height: 1.8rem;
            
        }
        
        .palteNew-top {
            height: 0.22rem;
            line-height: 0.22rem;
        }
        
        .palteNew-top div {
            float: left;
        }
        
        .palteNew-top div:nth-child(1) {
            width: 0.22rem;
            height: 0.22rem;
            background: url("../image/chilunn.png") no-repeat;
            background-size: 100% 100%;
        }
        
        .palteNew-top div:nth-child(2) {
            font-size: 0.16rem;
            color: #FF3536;
            margin-left: 0.08rem;
        }
        
        .palteNew-top div:nth-child(3) {
            font-size: 0.12rem;
            color: #FF3536;
            margin-left: 2.1rem;
        }
        
        .palteNew-top div:nth-child(4) {
            line-height: 0.11rem;
            text-align: center;
            width: 0.11rem;
            height: 0.11rem;
            border-radius: 0.11rem;
            background-color: #ff3536;
            margin-top: 0.05rem;
            font-size: 0.12rem;
            color: #fff;
            margin-left: 0.06rem;
        }
        
        .palteNew-down {
            height: 1.48rem;
            margin-top: 0.33rem;
        }


        .palteNew-down-swipe-box {
            font-size: 0;
            overflow: hidden;
            overflow-x: auto;
            white-space: nowrap;
        }
        
        .palteNew-down-box {
            width: 1.13rem;
            /*float: left;*/
            margin-left: 0.0789rem;
            display: inline-block;
        }
        
        .palteNew-down-box:nth-child(1) {
            margin-left: 0;
        }
        
        .palteNew-down-box div:nth-child(1) {
            width: 0.95rem;
            height: 0.95rem;
            margin-left: 0;
        }
        
        .palteNew-down-box img {
            width: 0.95rem;
            height: 0.95rem;
        }
        
        .palteNew-down-box div:nth-child(2) {
            margin-top: 0.13rem;
            line-height: normal;
            display: flex;
            margin-top: 0.17rem;
        }
        
        .palteNew-down-box div:nth-child(2) span {
            color: #999;
            font-size: 0.1rem;
            text-decoration: line-through;
            transform: scale(0.9);
            margin-left: -0.05rem;
        }
        
        .palteNew-down-box div:nth-child(3) {
            line-height: normal;
            display: flex;
            margin-top: 0.05rem;
        }
        
        .palteNew-down-box div:nth-child(3) span:nth-child(1) {
            color: #666;
            font-size: 0.12rem;
        }
        
        .palteNew-down-box div:nth-child(3) span:nth-child(2) {
            color: #ff0202;
            font-size: 0.12rem;
        }
        
        .plateRecommend {
            background-color: #f0f0f0;
        }

        .plateRecommend-top {
            width: 100%;
            height: 0.15rem;
        }

        .plateRecommend-title {
            font-size: 0.24rem;
            line-height: 0.4rem;
            height:0.4rem;
            color: #ff3536;
            text-align: center;
            background-color: #fff;
        }
        
        .plateRecommend-content-boxs{
            width: 3.54rem;
            margin-left:0.15rem;
            height:100%;
            overflow:hidden;!important
        }
        
        .plateRecommend-content-box {
            width: 1.67rem;
            height: 3.4rem;
            float: left;
            margin-top: 0.1rem;
            margin-right: 0.1rem;
            border-radius: 0.1rem;
            background-color: #fff;
            overflow: hidden;
        }

        .recommend-volum {
            height: 0.17rem;
            font-size: 0.12rem;
            background-color: #ff3536;
            color: #fff;
            text-align: center;
            line-height: 0.17rem;
        }
        
        

        .recommend-bot-prices {
            height: 0.16rem;
            font-size: 0.12rem;
            color: #f00;
            line-height: 0.16rem;
            margin-top: 0.07rem;
        }

        .recommend-bot-priceo {
            width: 0.75rem;
            height: 0.16rem;
            position: relative;
            border: 0.01rem #f00 solid;
            border-radius: 0.02rem;
            float: left;
        }

        .recommend-bot-priceo::before {
            content: "";
            width: 0.07rem;
            height: 0.07rem;
            border-radius: 50%;
            display: block;
            background: #fff;
            position: absolute;
            top: 50%;
            left: -0.05rem;
            transform: translateY(-50%);
            border-right: 0.01rem #f00 solid;
        }

        .recommend-bot-priceo::after {
            content: "";
            width: 0.07rem;
            height: 0.07rem;
            border-radius: 50%;
            display: block;
            background: #fff;
            position: absolute;
            top: 50%;
            right: -0.05rem;
            transform: translateY(-50%);
            border-left: 0.01rem #f00 solid;
        }
        .recommend-bot-pricet div{
            width: 1rem;
            position: absolute;
            top: 0;
            left:-0.05rem;
            transform: scale(0.77);
        }
        
        .recommend-bot-priceo div
        {
            width: 1rem;
            position: absolute;
            top: 0;
            left:-0.05rem;
            transform: scale(0.77);
        }
        
        .recommend-bot-pricet {
            width: 0.75rem;
            height: 0.16rem;
            position: relative;
            border: 0.01rem #f00 solid;
            border-radius: 0.02rem;
            margin-left: 0.04rem;
            float: left;
        }

        .recommend-bot-pricet::before {
            content: "";
            width: 0.07rem;
            height: 0.07rem;
            border-radius: 50%;
            display: block;
            background: #fff;
            position: absolute;
            top: 50%;
            left: -0.05rem;
            transform: translateY(-50%);
            border-right: 0.01rem #f00 solid;
        }

        .recommend-bot-pricet::after {
            content: "";
            width: 0.07rem;
            height: 0.07rem;
            border-radius: 50%;
            display: block;
            background: #fff;
            position: absolute;
            top: 50%;
            right: -0.05rem;
            transform: translateY(-50%);
            border-left: 0.01rem #f00 solid;
        }

     

        .recommend-image {
            margin-left: 0.05rem;
        }
        
        .recommend-bot-title {
            margin-top: 0.11rem;
            height: 0.16rem;
            font-size: 0.09rem;
            color: #333;
            line-height: 0.16rem;
        }
        
        .recommend-bot-title div {
            float: left;
        }
        
        .recommend-bot-title img {
            width: 0.16rem;
            height: 0.16rem;
        }
        
        .recommend-bot-title p {
            margin-left: 0.05rem;
        }
        
        .recommend-bot-baijin {
            height: 0.16rem;
            margin-top: 0.17rem;
        }
        
        .recommend-bot-baijin img {
            float: left;
            width: 0.12rem;
            height: 0.12rem;
            margin-top: 0.02rem;
        }
        
        .recommend-bot-baijino {
            float: left;
            font-size: 0.12rem;
            color: #1c1c1c;
            font-weight: bold;
        }
        
        .recommend-bot-baijint {
            float: left;
            font-size: 0.1rem;
            color: #bcbcbc;
            margin-left: -0.02rem;
            margin-top: 0.02rem;
            text-decoration: line-through;
            transform: scale(0.9);
        }
        
        .recommend-bot-zuanshi {
            margin-top: 0.1rem;
            line-height: 0.05rem;
            height: 0.18rem;
        }
        
        .recommend-bot-zuanshiq img {
            width: 0.12rem;
            height: 0.12rem;
            float: left;
        }
        
        .recommend-bot-zuanshiq span {
            font-size: 0.14rem;
            font-weight: bold;
            margin: 0.045rem 0.03rem 0 0.03rem;
            color: #f00;
            float: left;
        }
        
        .recommend-bot-zuanshi div {
            float: left;
        }
        
        .recommend-bot-zuanshih {
            width: 0;
            height: 0;
            border-right: 0.05rem solid #fb5758;
            border-bottom: 0.06rem solid transparent;
            border-top: 0.06rem solid transparent;
        }
        
        .recommend-bot-zuanshihh {
            width: 0.55rem;
            height: 0.12rem;
            background-image: linear-gradient(to right, #fb5758, #ff7f62);
            border-bottom-right-radius: 0.02rem;
            border-top-right-radius:0.02rem;
            text-align: center;
            position: relative;
        }
        
        .recommend-bot-zuanshihh p{
            width: 0.8rem;
            font-size: 0.12rem;
            color: #fff;
            position: absolute;
            top: 0.035rem;
            left: -0.15rem;
            transform: scale(0.7);
        }

        .recommend-images {
            height: 2rem;
            position: relative;
        }

        .recommend-images img {
            width: 100%;
            height: 100%;
        }

        .recommend-coupon {
            width: 0.6rem;
            height: 0.25rem;
            background-color: #f00;
            position: absolute;
            top: 0.1rem;
            left: 0;
            line-height: 0.2rem;
        }

        .recommend-coupon-price {
           
            font-size: 0.12rem;
            color: #fff;
            margin-left: 0.2rem;
            line-height:0.25rem;
        }

        .recommend-coupon-title {
            width: 0.15rem;
            height: 0.255rem;
            background-color: black;
            position: absolute;
            top: 0;
            left: 0.025rem;
            line-height: 0.255rem;
            text-align: center;
            color: #fff6ac;
            font-size: 0.12rem;
        }

        .recommend-coupon-top {
            content: "";
            position: absolute;
            top: 0;
            right: -0.1rem;
            width: 0;
            height: 0;
            border-top: 0.13rem solid #f00;
            border-right: 0.1rem solid transparent;
        }

        .recommend-coupon-bot {
            content: "";
            position: absolute;
            top: 0.125rem;
            right: -0.1rem;
            width: 0;
            height: 0;
            border-bottom: 0.125rem solid #f00;
            border-right: 0.1rem solid transparent;
        }
        
    
    </style>
</head>

<body>
<header id="header"></header>
<div class="search">
    <div class="search-box">
        <div class="search-image  icon iconfont icon-search"></div>
        <div class="search-input">
            <input type="text" class="" placeholder="搜索好物"/>
        </div>
    </div>
</div>
<div class="banner-plate-navigation">
    <div class="banner">
        <div class="banner-lbt" id="lbt"></div>
        <div class="indicator">
            <div class="indicator-box"></div>
            <div class="indicator-box"></div>
            <div class="indicator-box"></div>
        </div>
    </div>
    <div class="plate-navigation swipe" id='slider'>
        <div class='swipe-wrap'>
            <div class="plate-navigation-one swipe-box">
                <div class="save-money plate-navigation-box">
                    <div class="plate-navigation-image"></div>
                    <div class="plate-navigation-text"><span>惠省钱</span></div>
                </div>
                <div class="plate-navigation-box">
                    <div class="plate-navigation-image"></div>
                    <div class="plate-navigation-text"><span>惠省钱1</span></div>
                </div>
                <div class="plate-navigation-box">
                    <div class="plate-navigation-image"></div>
                    <div class="plate-navigation-text"><span>惠省钱2</span></div>
                </div>
                <div class="plate-navigation-box">
                    <div class="plate-navigation-image"></div>
                    <div class="plate-navigation-text"><span>惠省钱3</span></div>
                </div>
                <div class="plate-navigation-box">
                    <div class="plate-navigation-image"></div>
                    <div class="plate-navigation-text"><span>惠省钱4</span></div>
                </div>
                <div class="plate-navigation-box">
                    <div class="plate-navigation-image"></div>
                    <div class="plate-navigation-text"><span>惠省钱5</span></div>
                </div>
                <div class="plate-navigation-box">
                    <div class="plate-navigation-image"></div>
                    <div class="plate-navigation-text"><span>惠省钱6</span></div>
                </div>
                <div class="plate-navigation-box">
                    <div class="plate-navigation-image"></div>
                    <div class="plate-navigation-text"><span>惠省钱7</span></div>
                </div>
                <div class="plate-navigation-box">
                    <div class="plate-navigation-image"></div>
                    <div class="plate-navigation-text"><span>惠省钱8</span></div>
                </div>
                <div class="plate-navigation-box">
                    <div class="plate-navigation-image"></div>
                    <div class="plate-navigation-text"><span>惠省钱9</span></div>
                </div>
            </div>
            <div class="plate-navigation-two swipe-box">
                <div class="plate-navigation-box">
                    <div class="plate-navigation-image"></div>
                    <div class="plate-navigation-text"><span>惠省钱1</span></div>
                </div>
                <div class="plate-navigation-box">
                    <div class="plate-navigation-image"></div>
                    <div class="plate-navigation-text"><span>惠省钱2</span></div>
                </div>
                <div class="plate-navigation-box">
                    <div class="plate-navigation-image"></div>
                    <div class="plate-navigation-text"><span>惠省钱3</span></div>
                </div>
                <div class="plate-navigation-box">
                    <div class="plate-navigation-image"></div>
                    <div class="plate-navigation-text"><span>惠省钱4</span></div>
                </div>
                <div class="plate-navigation-box">
                    <div class="plate-navigation-image"></div>
                    <div class="plate-navigation-text"><span>惠省钱5</span></div>
                </div>
                <div class="plate-navigation-box">
                    <div class="plate-navigation-image"></div>
                    <div class="plate-navigation-text"><span>惠省钱6</span></div>
                </div>
                <div class="plate-navigation-box">
                    <div class="plate-navigation-image"></div>
                    <div class="plate-navigation-text"><span>惠省钱7</span></div>
                </div>
                <div class="plate-navigation-box">
                    <div class="plate-navigation-image"></div>
                    <div class="plate-navigation-text"><span>惠省钱8</span></div>
                </div>
                <div class="plate-navigation-box">
                    <div class="plate-navigation-image"></div>
                    <div class="plate-navigation-text"><span>惠省钱9</span></div>
                </div>
                <div class="plate-navigation-box">
                    <div class="plate-navigation-image"></div>
                    <div class="plate-navigation-text"><span>惠省钱9</span></div>
                </div>
            </div>
        </div>
    </div>
    <div class="title-box">
        <ul id="swipeIndicator" class="title-box-ul">
            <li class="active"></li>
            <li></li>
        </ul>
    </div>
</div>
<div class="activity">
    <div class="activity-top">
        <div class="activity-top-img"><img
            src="http://axh-static.oss-cn-shenzhen.aliyuncs.com/Juyunka/img/1576748959.jpg"></div>
        <div class="activity-top-img"><img
            src="http://axh-static.oss-cn-shenzhen.aliyuncs.com/Juyunka/img/1576749948.jpg"></div>
    </div>
    <div class="activity-bottom">
        <div class="activity-bottom-img"><img
            src="http://axh-static.oss-cn-shenzhen.aliyuncs.com/Juyunka/img/1576834284.jpg"></div>
        <div class="activity-bottom-img"><img
            src="http://axh-static.oss-cn-shenzhen.aliyuncs.com/Juyunka/img/1576834292.jpg"></div>
        <div class="activity-bottom-img"><img
            src="http://axh-static.oss-cn-shenzhen.aliyuncs.com/Juyunka/img/1575275532.jpg"></div>
    </div>
</div>
<div class="palteNew">
    <div class="palteNew-top">
        <div></div>
        <div><span>今日上新</span></div>
        <div><span>更多</span></div>
        <div>></div>
    </div>
    <div id="palteNew-down-swipe" class="palteNew-down-swipe">
        <div class="palteNew-down-swipe-wrap">
            <div class="palteNew-down palteNew-down-swipe-box">
                <div class="palteNew-down-box">
                    <div>
                        <img
                            src="https://img.alicdn.com/tfscom/i3/2200802218300/O1CN01SLm9nh2BBRvWJcK9I_!!0-item_pic.jpg">
                    </div>
                    <div>
                        <span>￥1000.00淘宝参考价</span>
                    </div>
                    <div>
                        <span class="aui-">钻石到手价</span>
                        <span>￥10.45</span>
                    </div>
                </div>
                <div class="palteNew-down-box">
                    <div>
                        <img
                            src="https://img.alicdn.com/tfscom/i3/2200802218300/O1CN01SLm9nh2BBRvWJcK9I_!!0-item_pic.jpg">
                    </div>
                    <div>
                        <span>￥1000.00淘宝参考价</span>
                    </div>
                    <div>
                        <span class="aui-">钻石到手价</span>
                        <span>￥10.45</span>
                    </div>
                </div>
                <div class="palteNew-down-box">
                    <div>
                        <img
                            src="https://img.alicdn.com/tfscom/i3/2200802218300/O1CN01SLm9nh2BBRvWJcK9I_!!0-item_pic.jpg">
                    </div>
                    <div>
                        <span>￥1000.00淘宝参考价</span>
                    </div>
                    <div>
                        <span class="aui-">钻石到手价</span>
                        <span>￥10.45</span>
                    </div>
                </div>
                <div class="palteNew-down-box">
                    <div>
                        <img
                            src="https://img.alicdn.com/tfscom/i3/2200802218300/O1CN01SLm9nh2BBRvWJcK9I_!!0-item_pic.jpg">
                    </div>
                    <div>
                        <span>￥1000.00淘宝参考价</span>
                    </div>
                    <div>
                        <span class="aui-">钻石到手价</span>
                        <span>￥0</span>
                    </div>
                </div>
                <div class="palteNew-down-box">
                    <div>
                        <img
                                src="https://img.alicdn.com/tfscom/i3/2200802218300/O1CN01SLm9nh2BBRvWJcK9I_!!0-item_pic.jpg">
                    </div>
                    <div>
                        <span>￥1000.00淘宝参考价</span>
                    </div>
                    <div>
                        <span class="aui-">钻石到手价</span>
                        <span>￥1000</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="plateRecommend">
    <div class="plateRecommend-top"></div>
    <div class="plateRecommend-title">
        <p>精 / 选 / 推 / 荐</p>
    </div>
    <div class="plateRecommend-content">
        <div class="plateRecommend-content-boxs">
            <div class="plateRecommend-content-box">
                <div class="recommend-images">
                    <img src="../image/tianmao.png" />
                    <div class="recommend-coupon">
                        <p class="recommend-coupon-price">￥100</p>
                        <div class="recommend-coupon-title">
                            <p>券</p>
                        </div>
                        <div class="recommend-coupon-top"></div>
                        <div class="recommend-coupon-bot"></div>
                    </div>
                </div>
                <div class="recommend-volum">
                    <p>已售件</p>
                </div>
                <div class="recommend-image">
                    <div class="recommend-bot-title">
                        <div>
                            <img src="../image/tianmao.png" />
                            <!--<img src="../image/taobao.png" />-->
                        </div>
                        <div>
                            <p>131eaassada</p>
                        </div>
                    </div>
                    <div class="recommend-bot-prices">
                        <div class="recommend-bot-priceo">
                            <div>钻石返￥10.00</div>
                        </div>
                        <div class="recommend-bot-pricet">
                            <div>白金返￥10.00</div>
                        </div>
                    </div>
                    <div class="recommend-bot-baijin">
                        <img src="../image/baijin.png" />
                        <span class="recommend-bot-baijino">￥100.00</span>
                        <span class="recommend-bot-baijint">￥120.00淘宝价</span>
                    </div>
                    <div class="recommend-bot-zuanshi">
                        <div class="recommend-bot-zuanshiq">
                            <img src="../image/zuanshi.png" />
                            <span>￥1000.00</span>
                        </div>
                        <div>
                            <div class="recommend-bot-zuanshih"></div>
                            <div class="recommend-bot-zuanshihh">
                                <p>钻石到手价</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="plateRecommend-content-box">
                <div class="recommend-images">
                    <img src="../image/tianmao.png" />
                    <div class="recommend-coupon">
                        <p class="recommend-coupon-price">￥100</p>
                        <div class="recommend-coupon-title">
                            <p>券</p>
                        </div>
                        <div class="recommend-coupon-top"></div>
                        <div class="recommend-coupon-bot"></div>
                    </div>
                </div>
                <div class="recommend-volum">
                    <p>已售件</p>
                </div>
                <div class="recommend-image">
                    <div class="recommend-bot-title">
                        <div>
                            <img src="../image/tianmao.png" />
                            <!--<img src="../image/taobao.png" />-->
                        </div>
                        <div>
                            <p>131eaassada</p>
                        </div>
                    </div>
                    <div class="recommend-bot-prices">
                        <div class="recommend-bot-priceo">
                            <div>钻石返￥10.00</div>
                        </div>
                        <div class="recommend-bot-pricet">
                            <div>白金返￥10.00</div>
                        </div>
                    </div>
                    <div class="recommend-bot-baijin">
                        <img src="../image/baijin.png" />
                        <span class="recommend-bot-baijino">￥100.00</span>
                        <span class="recommend-bot-baijint">￥120.00淘宝价</span>
                    </div>
                    <div class="recommend-bot-zuanshi">
                        <div class="recommend-bot-zuanshiq">
                            <img src="../image/zuanshi.png" />
                            <span>￥1000.00</span>
                        </div>
                        <div>
                            <div class="recommend-bot-zuanshih"></div>
                            <div class="recommend-bot-zuanshihh">
                                <p>钻石到手价</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="plateRecommend-content-box">
                <div class="recommend-images">
                    <img src="../image/tianmao.png" />
                    <div class="recommend-coupon">
                        <p class="recommend-coupon-price">￥100</p>
                        <div class="recommend-coupon-title">
                            <p>券</p>
                        </div>
                        <div class="recommend-coupon-top"></div>
                        <div class="recommend-coupon-bot"></div>
                    </div>
                </div>
                <div class="recommend-volum">
                    <p>已售件</p>
                </div>
                <div class="recommend-image">
                    <div class="recommend-bot-title">
                        <div>
                            <img src="../image/tianmao.png" />
                            <!--<img src="../image/taobao.png" />-->
                        </div>
                        <div>
                            <p>131eaassada</p>
                        </div>
                    </div>
                    <div class="recommend-bot-prices">
                        <div class="recommend-bot-priceo">
                            <div>钻石返￥10.00</div>
                        </div>
                        <div class="recommend-bot-pricet">
                            <div>白金返￥10.00</div>
                        </div>
                    </div>
                    <div class="recommend-bot-baijin">
                        <img src="../image/baijin.png" />
                        <span class="recommend-bot-baijino">￥100.00</span>
                        <span class="recommend-bot-baijint">￥120.00淘宝价</span>
                    </div>
                    <div class="recommend-bot-zuanshi">
                        <div class="recommend-bot-zuanshiq">
                            <img src="../image/zuanshi.png" />
                            <span>￥1000.00</span>
                        </div>
                        <div>
                            <div class="recommend-bot-zuanshih"></div>
                            <div class="recommend-bot-zuanshihh">
                                <p>钻石到手价</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="plateRecommend-content-box">
                <div class="recommend-images">
                    <img src="../image/tianmao.png" />
                    <div class="recommend-coupon">
                        <p class="recommend-coupon-price">￥100</p>
                        <div class="recommend-coupon-title">
                            <p>券</p>
                        </div>
                        <div class="recommend-coupon-top"></div>
                        <div class="recommend-coupon-bot"></div>
                    </div>
                </div>
                <div class="recommend-volum">
                    <p>已售件</p>
                </div>
                <div class="recommend-image">
                    <div class="recommend-bot-title">
                        <div>
                            <img src="../image/tianmao.png" />
                            <!--<img src="../image/taobao.png" />-->
                        </div>
                        <div>
                            <p>131eaassada</p>
                        </div>
                    </div>
                    <div class="recommend-bot-prices">
                        <div class="recommend-bot-priceo">
                            <div>钻石返￥10.00</div>
                        </div>
                        <div class="recommend-bot-pricet">
                            <div>白金返￥10.00</div>
                        </div>
                    </div>
                    <div class="recommend-bot-baijin">
                        <img src="../image/baijin.png" />
                        <span class="recommend-bot-baijino">￥100.00</span>
                        <span class="recommend-bot-baijint">￥120.00淘宝价</span>
                    </div>
                    <div class="recommend-bot-zuanshi">
                        <div class="recommend-bot-zuanshiq">
                            <img src="../image/zuanshi.png" />
                            <span>￥1000.00</span>
                        </div>
                        <div>
                            <div class="recommend-bot-zuanshih"></div>
                            <div class="recommend-bot-zuanshihh">
                                <p>钻石到手价</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="plateRecommend-content-box">
                <div class="recommend-images">
                    <img src="../image/tianmao.png" />
                    <div class="recommend-coupon">
                        <p class="recommend-coupon-price">￥100</p>
                        <div class="recommend-coupon-title">
                            <p>券</p>
                        </div>
                        <div class="recommend-coupon-top"></div>
                        <div class="recommend-coupon-bot"></div>
                    </div>
                </div>
                <div class="recommend-volum">
                    <p>已售件</p>
                </div>
                <div class="recommend-image">
                    <div class="recommend-bot-title">
                        <div>
                            <img src="../image/tianmao.png" />
                            <!--<img src="../image/taobao.png" />-->
                        </div>
                        <div>
                            <p>131eaassada</p>
                        </div>
                    </div>
                    <div class="recommend-bot-prices">
                        <div class="recommend-bot-priceo">
                            <div>钻石返￥10.00</div>
                        </div>
                        <div class="recommend-bot-pricet">
                            <div>白金返￥10.00</div>
                        </div>
                    </div>
                    <div class="recommend-bot-baijin">
                        <img src="../image/baijin.png" />
                        <span class="recommend-bot-baijino">￥100.00</span>
                        <span class="recommend-bot-baijint">￥120.00淘宝价</span>
                    </div>
                    <div class="recommend-bot-zuanshi">
                        <div class="recommend-bot-zuanshiq">
                            <img src="../image/zuanshi.png" />
                            <span>￥1000.00</span>
                        </div>
                        <div>
                            <div class="recommend-bot-zuanshih"></div>
                            <div class="recommend-bot-zuanshihh">
                                <p>钻石到手价</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="plateRecommend-content-box">
                <div class="recommend-images">
                    <img src="../image/tianmao.png" />
                    <div class="recommend-coupon">
                        <p class="recommend-coupon-price">￥100</p>
                        <div class="recommend-coupon-title">
                            <p>券</p>
                        </div>
                        <div class="recommend-coupon-top"></div>
                        <div class="recommend-coupon-bot"></div>
                    </div>
                </div>
                <div class="recommend-volum">
                    <p>已售件</p>
                </div>
                <div class="recommend-image">
                    <div class="recommend-bot-title">
                        <div>
                            <img src="../image/tianmao.png" />
                            <!--<img src="../image/taobao.png" />-->
                        </div>
                        <div>
                            <p>131eaassada</p>
                        </div>
                    </div>
                    <div class="recommend-bot-prices">
                        <div class="recommend-bot-priceo">
                            <div>钻石返￥10.00</div>
                        </div>
                        <div class="recommend-bot-pricet">
                            <div>白金返￥10.00</div>
                        </div>
                    </div>
                    <div class="recommend-bot-baijin">
                        <img src="../image/baijin.png" />
                        <span class="recommend-bot-baijino">￥100.00</span>
                        <span class="recommend-bot-baijint">￥120.00淘宝价</span>
                    </div>
                    <div class="recommend-bot-zuanshi">
                        <div class="recommend-bot-zuanshiq">
                            <img src="../image/zuanshi.png" />
                            <span>￥1000.00</span>
                        </div>
                        <div>
                            <div class="recommend-bot-zuanshih"></div>
                            <div class="recommend-bot-zuanshihh">
                                <p>钻石到手价</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="plateRecommend-content-box">
                <div class="recommend-images">
                    <img src="../image/tianmao.png" />
                    <div class="recommend-coupon">
                        <p class="recommend-coupon-price">￥100</p>
                        <div class="recommend-coupon-title">
                            <p>券</p>
                        </div>
                        <div class="recommend-coupon-top"></div>
                        <div class="recommend-coupon-bot"></div>
                    </div>
                </div>
                <div class="recommend-volum">
                    <p>已售件</p>
                </div>
                <div class="recommend-image">
                    <div class="recommend-bot-title">
                        <div>
                            <img src="../image/tianmao.png" />
                            <!--<img src="../image/taobao.png" />-->
                        </div>
                        <div>
                            <p>131eaassada</p>
                        </div>
                    </div>
                    <div class="recommend-bot-prices">
                        <div class="recommend-bot-priceo">
                            <div>钻石返￥10.00</div>
                        </div>
                        <div class="recommend-bot-pricet">
                            <div>白金返￥10.00</div>
                        </div>
                    </div>
                    <div class="recommend-bot-baijin">
                        <img src="../image/baijin.png" />
                        <span class="recommend-bot-baijino">￥100.00</span>
                        <span class="recommend-bot-baijint">￥120.00淘宝价</span>
                    </div>
                    <div class="recommend-bot-zuanshi">
                        <div class="recommend-bot-zuanshiq">
                            <img src="../image/zuanshi.png" />
                            <span>￥1000.00</span>
                        </div>
                        <div>
                            <div class="recommend-bot-zuanshih"></div>
                            <div class="recommend-bot-zuanshihh">
                                <p>钻石到手价</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="plateRecommend-content-box">
                <div class="recommend-images">
                    <img src="../image/tianmao.png" />
                    <div class="recommend-coupon">
                        <p class="recommend-coupon-price">￥100</p>
                        <div class="recommend-coupon-title">
                            <p>券</p>
                        </div>
                        <div class="recommend-coupon-top"></div>
                        <div class="recommend-coupon-bot"></div>
                    </div>
                </div>
                <div class="recommend-volum">
                    <p>已售件</p>
                </div>
                <div class="recommend-image">
                    <div class="recommend-bot-title">
                        <div>
                            <img src="../image/tianmao.png" />
                            <!--<img src="../image/taobao.png" />-->
                        </div>
                        <div>
                            <p>131eaassada</p>
                        </div>
                    </div>
                    <div class="recommend-bot-prices">
                        <div class="recommend-bot-priceo">
                            <div>钻石返￥10.00</div>
                        </div>
                        <div class="recommend-bot-pricet">
                            <div>白金返￥10.00</div>
                        </div>
                    </div>
                    <div class="recommend-bot-baijin">
                        <img src="../image/baijin.png" />
                        <span class="recommend-bot-baijino">￥100.00</span>
                        <span class="recommend-bot-baijint">￥120.00淘宝价</span>
                    </div>
                    <div class="recommend-bot-zuanshi">
                        <div class="recommend-bot-zuanshiq">
                            <img src="../image/zuanshi.png" />
                            <span>￥1000.00</span>
                        </div>
                        <div>
                            <div class="recommend-bot-zuanshih"></div>
                            <div class="recommend-bot-zuanshihh">
                                <p>钻石到手价</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="plateRecommend-content-box">
                <div class="recommend-images">
                    <img src="../image/tianmao.png" />
                    <div class="recommend-coupon">
                        <p class="recommend-coupon-price">￥100</p>
                        <div class="recommend-coupon-title">
                            <p>券</p>
                        </div>
                        <div class="recommend-coupon-top"></div>
                        <div class="recommend-coupon-bot"></div>
                    </div>
                </div>
                <div class="recommend-volum">
                    <p>已售件</p>
                </div>
                <div class="recommend-image">
                    <div class="recommend-bot-title">
                        <div>
                            <img src="../image/tianmao.png" />
                            <!--<img src="../image/taobao.png" />-->
                        </div>
                        <div>
                            <p>131eaassada</p>
                        </div>
                    </div>
                    <div class="recommend-bot-prices">
                        <div class="recommend-bot-priceo">
                            <div>钻石返￥10.00</div>
                        </div>
                        <div class="recommend-bot-pricet">
                            <div>白金返￥10.00</div>
                        </div>
                    </div>
                    <div class="recommend-bot-baijin">
                        <img src="../image/baijin.png" />
                        <span class="recommend-bot-baijino">￥100.00</span>
                        <span class="recommend-bot-baijint">￥120.00淘宝价</span>
                    </div>
                    <div class="recommend-bot-zuanshi">
                        <div class="recommend-bot-zuanshiq">
                            <img src="../image/zuanshi.png" />
                            <span>￥1000.00</span>
                        </div>
                        <div>
                            <div class="recommend-bot-zuanshih"></div>
                            <div class="recommend-bot-zuanshihh">
                                <p>钻石到手价</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="plateRecommend-content-box">
                <div class="recommend-images">
                    <img src="../image/tianmao.png" />
                    <div class="recommend-coupon">
                        <p class="recommend-coupon-price">￥100</p>
                        <div class="recommend-coupon-title">
                            <p>券</p>
                        </div>
                        <div class="recommend-coupon-top"></div>
                        <div class="recommend-coupon-bot"></div>
                    </div>
                </div>
                <div class="recommend-volum">
                    <p>已售件</p>
                </div>
                <div class="recommend-image">
                    <div class="recommend-bot-title">
                        <div>
                            <img src="../image/tianmao.png" />
                            <!--<img src="../image/taobao.png" />-->
                        </div>
                        <div>
                            <p>131eaassada</p>
                        </div>
                    </div>
                    <div class="recommend-bot-prices">
                        <div class="recommend-bot-priceo">
                            <div>钻石返￥10.00</div>
                        </div>
                        <div class="recommend-bot-pricet">
                            <div>白金返￥10.00</div>
                        </div>
                    </div>
                    <div class="recommend-bot-baijin">
                        <img src="../image/baijin.png" />
                        <span class="recommend-bot-baijino">￥100.00</span>
                        <span class="recommend-bot-baijint">￥120.00淘宝价</span>
                    </div>
                    <div class="recommend-bot-zuanshi">
                        <div class="recommend-bot-zuanshiq">
                            <img src="../image/zuanshi.png" />
                            <span>￥1000.00</span>
                        </div>
                        <div>
                            <div class="recommend-bot-zuanshih"></div>
                            <div class="recommend-bot-zuanshihh">
                                <p>钻石到手价</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../script/swipe.js"></script>
<script type="text/javascript">
    apiready = function () {//没有这个的话，就会报错api is not defined
        var header = $api.byId('header');
        $api.fixStatusBar(header);
        api.setStatusBarStyle({
            style: 'dark',
            color: 'rgba(255,255,255,0)'
        });
        
        // api.setStatusBarStyle({
        //     style: 'dark',        dark        //状态栏字体为黑色，适用于浅色背景
        //     light       //状态栏字体为白色，适用于深色背景
        //     color:'#ffffff'
        // });
        
        
        var mySlider = document.getElementById('lbt');//先获取放轮播图的div
        var UIScrollPicture = api.require('UIScrollPicture');
        UIScrollPicture.open({
            //轮播的区域
            rect: {
                x: mySlider.offsetLeft,//mySlider距离屏幕左边的距离
                y: mySlider.offsetTop,//mySlider距离屏幕上边的距离
                w: mySlider.clientWidth,//mySlider的宽度
                h: mySlider.clientHeight//mySlider的高度
            },
            data: {
                paths: [
                    'widget://image/guide1.jpg',
                    'widget://image/guide2.jpg',
                    'widget://image/guide3.jpg',
                ]
            },
            contentMode: 'scaleToFill',
            //切换的时间
            interval: 4,
            loop: true,
            fixed: false,
            cornerRadius: 10,
            scrollerCorner: 10,
            touchWait: true
        }, function (ret, err) {
            if (ret) {
                $('.indicator-box').removeClass('indicator-box-active')
                $('.indicator-box').eq(ret.index).addClass('indicator-box-active');
            }
        });
        
        UIScrollPicture.addEventListener({
            name: 'scroll'
        }, function (ret, err) {
            if (ret) {
                $('.indicator-box').removeClass('indicator-box-active')
                $('.indicator-box').eq(ret.index).addClass('indicator-box-active');
            } else {
            
            }
        });
        
        
        var li = $api.domAll('.title-box-ul li');
        var slider = Swipe($api.dom('#slider'), {
            startSlide: 0,
            continuous: false,
            disableScroll: true,
            stopPropagation: true,
            callback: function (index, elem) {
                var i = li.length;
                while (i--) {
                    li[i].className = '';
                }
                li[index].className = 'active';
            }
        });
        //
        // var slider = Swipe($api.dom('#palteNew-down-swipe'), {
        //     startSlide: 0,
        //     continuous: false,
        //     disableScroll: true,
        //     stopPropagation: true,
        // });
        
        // window.onload = function() {
        //     var li = $api.domAll('.title-box-ul li');
        //     var mySwiper = Swipe($api.byId('slider'), {
        //         auto: 3000,
        //         speed: 800,
        //         continuous: true,
        //         callback: function(index, elem) {
        //             var i = li.length;
        //             while (i--) {
        //                 li[i].className = '';
        //             }
        //             li[index].className = 'active';
        //         }
        //     });
        // };
        
    }


</script>

</html>
